<template>
  <div>

	
	<myheader />

	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="src">
					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">

					<div v-if='flwo_num ==0'>
						<h3 >该商品暂无被人关注</h3>
					</div>

					<div v-else>
						<h3 >已被 &nbsp;{{ flwo_num }} &nbsp;人收藏</h3>

						<div v-for="(item,index) in flow_name" :key='index'>
							<h4>关注者：{{ item.username }}</h4>
						</div>

					</div>

					<h2 class="mb-3 mt-0">{{ name }}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{ price }}</p>
					<h5 class="mt-4">商品简介</h5>
					<p>{{ desc }}</p>

					<p>颜色:{{ color }}</p>
					<p>号码:{{ size }}</p>
					<p>季节:{{ season }}</p>



					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					
					<a href="#" class="btn btn-full-width btn-lg btn-outline-primary">Add to cart</a></div>

					<!-- 关注用户 -->
					<div v-if="flow_type==1">
						<Button class="btn btn-full-width btn-lg btn-outline-primary" color='blue' 
						@click='click_flow'  >关注</Button>
					</div>

					<div v-if="flow_type==0">
						<Button class="btn btn-full-width btn-lg btn-outline-primary" color='blue' 
						@click='click_flow' >取消关注</Button>
					</div>
					

			</div>
		</div>
	</section>
	
	<div class="divider"></div>


	<section class="products text-center">
		<div class="container">
			

			<textarea v-model="content">  </textarea>

			<br /><br />



		</div>
	</section>

	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>	
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import comments from './comments.vue';
import {config} from '../config.js'

export default {
  data () {
    return {
      msg: "这是一个变量",
      //商品id
      id:'',
      name:'',
      price:'',
      desc:'',
      color:'',
      size:'',
      season:'',
      img:'',
      src:'',
      //评论内容
      content:'',
      //评论列表容器
      commentlist:[],
      //用户信息字典
	  myuser:{},
	  //关注
	flow_type:"",
	//关注数
	flwo_num:1,
	//关注用户名
	flow_name:[],
    }
  },

  //注册组件标签
  components:{

  		myheader,
 

  },
  mounted:function(){

  	window.that = this;

  	//接收商品id
  	var id = this.$route.query.id;


  	this.id = id;


  	//调用用户列表
  	this.get_user();


  	//调用接口
  	this.getdata();

  	//调用评论接口
  	this.get_comment();

   
  
},
  methods:{

	//提交关注
	click_flow(){

		//判断是关注还是取消关注
		if(this.flow_type==1){
			//发送求情
			this.axios.get('http://localhost:8000/getflow/',{params:{uid:localStorage.getItem('uid'),gid:this.gid,flow_type:1}}).then((res)=>{
				console.log(res)
				if(res.data.code==200){
					this.flow_type = 0
					
					//刷新
					this.$router.go(0)

				}
			})
		
		}else{
			//发送求情
			this.axios.get('http://localhost:8000/getflow/',{params:{uid:localStorage.getItem('uid'),gid:this.gid,flow_type:0}}).then((res)=>{
				console.log(res)
				if(res.data.code==200){
					this.flow_type = 1

					//刷新
					this.$router.go(0)
				}
			})

		}
		
	},

  	//调用所有用户列表
  	get_user:function(){


  		//发送请求
      this.axios.get('http://localhost:8000/userlist/').then((result) =>{

              console.log(result);      

              //动态赋值

              for(let i=0,l=result.data.length;i<l;i++){

              		this.myuser[result.data[i].id] = result.data[i].username;

              }

              console.log(this.myuser);

      });

  	},
 



  	},
  
  	//商品信息接口
  	getdata:function(){


  		//发送请求
      this.axios.get('http://localhost:8000/goodinfo/',{params:{id:this.id}}).then((result) =>{

              console.log(result);

              this.name = result.data.name;
              this.desc = result.data.desc;
              this.price = result.data.price;
              this.img = result.data.img;

              var parms = result.data.parms;

              //转换类型
              parms = JSON.parse(parms);

              this.color = parms.color;
              this.size = parms.size;
              this.season = parms.season;
              this.src = 'http://localhost:8000/static/upload/'+result.data.img;

              console.log(parms);

              

      });



  	}

     
  }



</script>
 
<style>



</style>